<template>
	<view class="wrap safe-area">
		<view class="wrap-list">
			<block v-for="(item, index) in list" :key="index">
				<view class="item flex align-center" @click="onItem(item)">
					<image class="file" :src="$getImageURL(item.image)" />

					<view class="right">
						<view class="name f-30">
							{{ item.title }}
						</view>

						<view class="price f-26"> ¥{{ item.price }} </view>
					</view>
				</view>
			</block>
		</view>

		<wanl-empty v-if="list.length === 0" text="暂无数据" />
	</view>
</template>

<script>
	import { getBuyGoodsList } from "@/API/goods.js";
	export default {
		data() {
			return {
				type: "", //0:商品 1:卡券/套餐 2:自提商品 3:同城配送
				
				page: 1,
				total: 0,
				list: [],
			};
		},
		onLoad(options) {
			this.type = options.type;
			
			uni.setNavigationBarTitle({
				title: options.title,
			});

			this.onRefresh();
		},
		onPullDownRefresh() {
			this.onRefresh();
		},
		onReachBottom() {
			if (this.list.length < this.total) {
				this.page++;
				this.getData();
			}
		},
		methods: {
			/**
			 * 点击
			 */
			onItem(item) {
				let obj = {
					type: this.type,
					item: item
				}
				uni.$emit("chooseRecommendItem", obj);
				uni.navigateBack();
			},
			/**
			 * 刷新
			 */
			onRefresh() {
				this.page = 1;
				this.getData();
			},
			/**
			 * 网络请求
			 */
			getData() {
				getBuyGoodsList(this.page, this.type).then((res) => {
					const list = res.data.data;
					if (this.page === 1) {
						this.total = res.data.total;
						this.list = list;
					} else {
						this.list = this.list.concat(list);
					}
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.wrap {
		padding: 20rpx;
		box-sizing: border-box;

		.wrap-list {
			width: 100%;
			overflow: hidden;

			.item {
				width: 100%;
				background-color: white;
				padding: 30rpx;
				border-radius: 10rpx;
				overflow: hidden;
				box-sizing: border-box;
				margin-bottom: 20rpx;

				&:last-child {
					margin-bottom: 0rpx;
				}

				.file {
					width: 100rpx;
					height: 100rpx;
					border-radius: 10rpx;
				}

				.right {
					margin-left: 20rpx;
					flex: 1;
					overflow: hidden;

					.name {
						color: #121212;
					}

					.price {
						margin-top: 20rpx;
						color: #dd5500;
					}
				}
			}
		}
	}
</style>
